<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/login.css">
    <link rel="stylesheet" href="/css/icp.css">
    <style>

    </style>
</head>

<body>
    <div class="row align-items-center">
        
        <div class="col">
        </div>
        <div class="col">
            <div class="alert alert-primary alert-dismissible fade show invisible text-center" style="width: 42rem;"
                role="alert">
                <strong>提示：</strong><label for="" id="msg"></label>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
        <div class="col">
        </div>
    </div>
    <div></div>
    <div class="card">
        
        <div class="card-header text-center">
            <h2>欢迎来到我的微说说</h2>
        </div>

        <div class="card-body">
            <form id="loginForm">
                <div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">用户名</label>
                        <input type="text" class="form-control" name="username" id="username"
                            aria-describedby="emailHelp">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" class="form-control" name="password" id="password">
                    </div>
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        <label class="form-check-label" for="exampleCheck1">记住我</label>
                    </div>
                    <div class="form-down ">
                        <button type="button" class="btn btn-primary btn-lg"
                            onclick="jump()">&nbsp;&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;&nbsp;</button>
                        <button type="button" class="btn btn-primary btn-lg"
                            onclick="register()">&nbsp;&nbsp;&nbsp;&nbsp;注册&nbsp;&nbsp;&nbsp;&nbsp;</button>
            </form>
        </div>
    </div>


    </div>
    </div>

    <div class="div_foot">
        <a href="https://beian.miit.gov.cn/">
            闽ICP备2021004172号-1</a>
    </div>


    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script>
        function register() {
            window.location.href = '/register';
        }







        // 点击注册时 执行的方法（获取数据，进行初步验证，验证通过则通过ajax向后台提交数据；否则提示验证不通过的信息）
        function jump() {
            let username = $('#username').val();
            let password = $('#password').val();
            if (username.length > 0 && password.length > 0) {
                // ajax请求
                $.ajax({
                    url: "/loginDone",
                    type: "POST",
                    data: $('#loginForm').serialize(),
                    dataType: "json",
                    success: function (res) {
                        console.log(res);
                        if (res.code === 200) {
                            window.location.href = "/";
                        } else {
                            alert_fn(res.msg);
                        }

                    },
                    error: function (msg) {
                        alert_fn('网络或者服务器有问题');
                    }
                })
            } else {// 验证不通过，提示相关信息，并且阻止提交
                alert_fn('用户名和密码不能为空');
                return false;
            }
        }

        // 这个方法包装了alert的相关行为和显示的内容
        function alert_fn(msg) {
            msg = msg || '密码不能为空，两次密码应该一致';
            // 替换提示的内容
            $('#msg').text(msg);
            // 移除不显示的class，则alert将显示
            $('.invisible').removeClass('invisible');
            // 三秒中后，给alert增加不显示的class，则alert重新隐藏
            setTimeout(() => {
                $('.alert').addClass('invisible');
            }, 3000);
        }


        new Follow('screen', {
 speed: 4,
 animR : 2,
 fn : function (i, j) {
  return {
   x : j/4*Math.cos(i),
   y : j/4*Math.sin(i)
  }
 }
})
    </script>
</body>

</html>